<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="jxz">
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
         <link rel="shortcut icon" href="image/mi.png" type="image/png">
         <link rel="icon" href="image/mi.png" type="image/png">
        <style>
        html,body{
                height: 100%;
            }
       body{
        background-color: #eee;
         }
     /*头部*/
     header{
         display: flex;
         justify-content: space-between;
         font-size: 5vw;
         color: gray;
     }
       header a{
           text-decoration: none;
           color: gray;
       }
       /*中心*/
       section{
           background-color: white;
           width: 100%;
           height:100%;
           text-align: center;
           
       }
       .empty-height{
           width: 100%;
           height: 100px;
       }
       section img{
           width: 20vw;  
       }
       button:nth-child(1){
           width: 40vw;
           height: 8vw;
           background-color:lightgray;
           font-size: 3vw;
           border:1px solid white;
       }
       button:nth-child(2){
           width: 40vw;
           height: 8vw;
           background-color: #FF5722;
           color: white;
           font-size: 3vw;
           border: 1px solid white;
       }
     button:hover{
         box-shadow: inset 2px 1px 10px gray;
     }

                       /*页脚*/
    footer{
        height:100px;
        width: 100%;
        background-color: white;
        position: fixed;
        bottom: 0;
        border-top: 1px solid gray;
    }
      nav{
            display: flex;
            line-height: 35px;
            margin-bottom: 0;
            justify-content: space-around;
        }
        nav a{
            font-size: 3rem;
            font-weight: normal;
            color: gray;
            display: block;    
        }
        .picture{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url(image/spr1.png);

        }
        .r1c7{
          background-position: 0 -360px;
        }
        .r1c1{
            background-position: 0 0;
        }
        .r1c3{
            background-position: 0 -120px;
        }
        .r1c4{
            background-position: 0-240px;
        }
        
        </style>
    </head>
    <body>
          <!--头部-->
    <header>
            <a href="#"> <span class="glyphicon glyphicon-chevron-left"></span></a>
            <span>购物车</span>
            <a href="#"><span class="glyphicon glyphicon-search"></span></a>
    </header>
    <!--中心-->
    <section>
        <div class="empty-height"></div>
        <img src="image/empty.png" alt="">
        <div>
            <button>全部商品</button>
            <button>精品商品</button>
        </div>
    </section>

    <!--页脚-->
      <footer>
        <nav>
        <a href="小米商城首页.html">
        <div class="picture r1c7"></div>
        <p>商城</p>
        </a>
        <a href="商城分类.html">
         <div class="picture r1c1"></div>
        <p>分类</p> 
        </a>
        <a href="小米购物车.html">
         <div class="picture r1c3"></div>
        <p>购物车</p>
        </a>
        <a href="个人中心.html">
        <div class="picture r1c4"></div>
        <p>服务</p>
        </a>
    </nav>
    </footer>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>